<template>
  <view class="video_play">
    <img :src="videoobj.img" alt="" />

    <!-- 工具栏 -->
    <view class="video_tool">
      <view
        :class="['iconfont', muted ? 'iconjingyin' : 'iconshengyin']"
        @click="this.muted = !this.muted"
      ></view>
      <view class="iconfont iconzhuanfa"
        ><button open-type="share"></button
      ></view>
    </view>
    <!-- 视频 -->
    <view class="video_wrap">
      <video :src="videoobj.video" objectFit="fill" :muted="muted"></video>
    </view>
    <!-- 下载-->
    <view class="download">
      <view class="download_btn" @click="download">下载高清</view>
    </view>
    <view class="progress-box" :hidden="hid">
      <progress :percent="downloadPercent" show-info stroke-width="3" />
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      videoobj: {
        video: "",
        img: ""
      },
      muted: false,
      downloadPercent: 0,
      hid: true
    };
  },
  onLoad(options) {
    if (options.video != undefined) {
      this.videoobj.video = decodeURIComponent(options.video);
      this.videoobj.img = decodeURIComponent(options.img);
      getApp().globalData.video = this.videoobj;
    } else {
      this.videoobj = getApp().globalData.video;
    }
  },
  methods: {
    async download() {
      uni.getSetting({
        success: res => {
          if (!res.authSetting["scope.writePhotosAlbum"]) {
            uni.openSetting({
              success(res) {
                if (res.authSetting["scope.writePhotosAlbum"]) {
                } else {
                  uni.showToast({
                    title: "获取权限失败！",
                    icon: "none"
                  });
                }
              }
            });
          }
        }
      });

      this.hid = false;

      const videourl = this.videoobj.video.replace(
        "http://cdn.video.picasso.dandanjiang.tv",
        "https://vc2.ccstay.com"
      );
      const downloadTask = uni.downloadFile({
        url: videourl,
        success: res => {
          if (res.statusCode === 200) {
            uni.saveVideoToPhotosAlbum({
              filePath: res.tempFilePath,
              success: function() {
                uni.hideLoading();
                uni.showToast({
                  title: "下载成功"
                });
              },
              fail: function(res) {
                console.log(res);

                uni.showToast({
                  title: "下载失败，请稍后重试",
                  icon: "none"
                });
              }
            });
          }
        },
        complete: res => {
          this.hid = true;
        }
      });

      downloadTask.onProgressUpdate(res => {
        // console.log("下载进度" + res.progress);
        // console.log("已经下载的数据长度" + res.totalBytesWritten);
        // console.log("预期需要下载的数据总长度" + res.totalBytesExpectedToWrite);
        this.downloadPercent = res.progress;
        // (
        //   (res.totalBytesWritten / res.totalBytesExpectedToWrite) *
        //   100
        // ).toFixed(2); //toFixed(2)取小数点后两位，更新progress组件的进度值
      });
    },

    onShareAppMessage(res) {
      return {
        title: "自定义转发标题",
        path:
          "/pages/videoPlay/index?video=" +
          encodeURIComponent(this.videoobj.video) +
          "&img=" +
          encodeURIComponent(this.videoobj.img)
      };
    }
  }
};
</script>

<style lang="scss" scoped>
.video_play {
  position: relative;
  img {
    position: absolute;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    //css3 滤镜
    filter: blur(20px);
  }

  .video_tool {
    height: 80rpx;
    display: flex;
    justify-content: flex-end;

    .iconfont {
      width: 80rpx;
      color: #fff;
      font-size: 50rpx;
      border-radius: 40rpx;
      background-color: rgba(0, 0, 0, 0.2);
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 20rpx;
    }
    .iconzhuanfa {
      position: relative;
      button {
        position: absolute;
        width: 100%;
        height: 100%;
        opacity: 0;
      }
    }
  }

  .video_wrap {
    display: flex;
    justify-content: center;
    video {
      width: 360rpx;
      height: 600rpx;
    }
  }

  .download {
    margin-top: 30rpx;
    display: flex;
    justify-content: center;
    view.download_btn {
      width: 360rpx;
      height: 80rpx;
      border-radius: 40rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      border: 1rpx solid #fff;
      background-color: rgba(0, 0, 0, 0.6);
    }
  }
}
</style>
